<template>
	<div>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<!-- <el-form-item class="w_150">
                                <el-autocomplete
									class="inline-input"
									v-model="business_name"
									:fetch-suggestions="querySearch3"
									placeholder="商户名称"
									:trigger-on-focus="true"
									@select="handleSelect3"
								></el-autocomplete>
                            </el-form-item> -->

							<!-- <el-form-item class="w_110">
                                <el-autocomplete
									class="inline-input"
									v-model="area_name"
									:fetch-suggestions="querySearch4"
									placeholder="选择商圈"
									:trigger-on-focus="true"
									@select="handleSelect4"
								></el-autocomplete>
                            </el-form-item> -->

							<!-- <el-form-item>
                                <el-select v-model="sign_status" placeholder="店铺状态" class="w_100">
									<el-option label="已注册" value="10"></el-option>
									<el-option label="已申请" value="20"></el-option>
									<el-option label="已合作" value="30"></el-option>
									<el-option label="未通过" value="40"></el-option>
									<el-option label="到期" value="50"></el-option>
								</el-select>
                            </el-form-item> -->
							<el-form-item class="w_90">
								<el-select v-model="monitor_type" placeholder="预警类型">
									<el-option label="预警类型" value="all"></el-option>
									<el-option label="应发未发" value="noCreate"></el-option>
									<el-option label="应发已发" value="created"></el-option>
								</el-select>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="shopList" stripe>
						<el-table-column prop="id" label="序号" width="70">
							<template slot-scope="{ row, $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="店铺名称">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contact_phone" label="负责人手机号">
							<template slot-scope="{ row, $index }">
								<span>{{ row.contact_phone | vf_mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈"></el-table-column>
						<el-table-column prop="label_name" label="岗位" width="150px" align="center">
							<template slot-scope="{ row, $index }">
								<span type="primary">{{ row.label_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="label_name" label="已发人数" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<el-tooltip effect="light" placement="top" :open-delay="500">
									<div slot="content">
										<div style="margin-bottom: 20px;">
											<span class="mr_10 mb_20">{{ user_historySD.week }}</span>
											<span class="mr_10 mb_20" style="cursor: pointer;" @click="urlTo(row)"
												>已发人数：<span style="color: red;">{{ row.person }}</span
												>/{{ row.person_sum }}</span
											>
										</div>
										<div style="margin-bottom: 20px;" v-for="(item, index) in user_historySD.demandList" :key="index">
											<span class="mr_10 mb_20"
												>{{ item.start_time | ReversalTime }}-{{
													(Number(item.start_time) + Number(item.hours)) | ReversalTime
												}}</span
											>
											<span class="mr_10 mb_20" style="color: var(--blue1); text-decoration: underline;"
												>{{ item.person_num }}人</span
											>
											<span class="mb_20">{{ item.status }}</span>
										</div>
										<div style="margin-bottom: 10px;">
											<span class="mr_10 mb_20">服务员用工频率：</span>
										</div>
										<div style="margin-bottom: 20px;" v-for="(item, index) in preset" :key="index">
											<span class="mr_10 mb_20">{{ item.name }}</span>
											<span class="mr_10 mb_20" v-for="(itemnext, indexnext) in item.arr" :key="indexnext"
												>{{ itemnext.start_time }}-{{ itemnext.end_time }}&nbsp;&nbsp;&nbsp;&nbsp;{{
													itemnext.person_num
												}}人；</span
											>
										</div>
									</div>

									<div @mouseover="cellMouseEnterSD(row)" @mouseout="cellMouseEnterSDLeave">
										<div>
											<h4 style="cursor: pointer; color: var(--blue1); text-decoration: underline;">
												{{ row.person }}
											</h4>
										</div>
									</div>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column prop="label_name" label="应发人数" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<el-tooltip effect="light" placement="top" :open-delay="500">
									<div slot="content">
										<div style="margin-bottom: 20px;">
											<span class="mr_10 mb_20">{{ user_historySD.week }}</span>
											<span class="mr_10 mb_20" style="cursor: pointer;" @click="urlTo(row)"
												>已发人数：<span style="color: red;">{{ row.person }}</span
												>/{{ row.person_sum }}</span
											>
										</div>
										<div style="margin-bottom: 20px;" v-for="(item, index) in user_historySD.demandList" :key="index">
											<span class="mr_10 mb_20"
												>{{ item.start_time | ReversalTime }}-{{
													(Number(item.start_time) + Number(item.hours)) | ReversalTime
												}}</span
											>
											<span class="mr_10 mb_20" style="color: var(--blue1); text-decoration: underline;"
												>{{ item.person_num }}人</span
											>
											<span class="mb_20">{{ item.status }}</span>
										</div>
										<div style="margin-bottom: 10px;">
											<span class="mr_10 mb_20">服务员用工频率：</span>
										</div>
										<div style="margin-bottom: 20px;" v-for="(item, index) in preset" :key="index">
											<span class="mr_10 mb_20">{{ item.name }}</span>
											<span class="mr_10 mb_20" v-for="(itemnext, indexnext) in item.arr" :key="indexnext"
												>{{ itemnext.start_time }}-{{ itemnext.end_time }}&nbsp;&nbsp;&nbsp;&nbsp;{{
													itemnext.person_num
												}}人；</span
											>
										</div>
									</div>

									<div @mouseover="cellMouseEnterSD(row)" @mouseout="cellMouseEnterSDLeave">
										<div>
											<h4 style="cursor: pointer; color: var(--blue1); text-decoration: underline;">
												{{ row.person_sum }}
											</h4>
										</div>
									</div>
								</el-tooltip>
								<!-- <el-link type="primary">{{row.person_sum}}</el-link> -->
							</template>
						</el-table-column>
						<el-table-column prop="monitor_type" label="预警类型" width="120" align="center">
							<template slot-scope="{ row, $index }">
								<span class="text-success" v-if="row.monitor_type == 'created'">应发已发</span>
								<span class="text-warning" v-if="row.monitor_type == 'noCreate'">应发未发</span>
							</template>
						</el-table-column>
						<el-table-column prop="business_director" label="销售"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
import { publicData } from '../../../../../assets/js/data.js'
export default {
	name: 'ShopList',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			business_id: '', //所属商户ID
			business_name: '', //所属商户name
			business_type: '', //所属商户类型
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			shop_sn: '', //店铺sn
			// area_id: "", //商圈ID
			// area_name: "", //商圈name
			sign_status: '', //签约状态10、已注册 20、申请签约 30签约成功 40签约失败 50 到期

			work_date: '',
			area_id: '',
			area_name: '',
			monitor_type: 'all', //预警类型

			shopList: [], //店铺列表
			shopList2: [], //搜索栏目的店铺列表
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',
			areaList: [], //区域列表
			user_historySD: [], //需求监控详细
			preset: [
				{
					id: 1,
					name: '周一',
					arr: []
				},
				{
					id: 2,
					name: '周二',
					arr: []
				},
				{
					id: 3,
					name: '周三',
					arr: []
				},
				{
					id: 4,
					name: '周四',
					arr: []
				},
				{
					id: 5,
					name: '周五',
					arr: []
				},
				{
					id: 6,
					name: '周六',
					arr: []
				},
				{
					id: 7,
					name: '周天',
					arr: []
				}
			]
		}
	},
	props: {
		row_ids: {
			type: String,
			default: ''
		},
		area_ids: {
			type: String
		},
		area_names: {
			type: String
		},
		work_dates: {
			type: String
		},
		monitor_types: {
			type: String
		}
	},
	watch: {
		row_ids: {
			handler: function (newValue, oldValue) {
				// console.log(newValue)
				// console.log(this.work_dates)staff_sn
				this.work_date = this.work_dates
				this.area_id = this.area_ids
				this.area_name = this.area_names
				this.monitor_type = this.monitor_types
				console.log(this.monitor_types)
				if (this.monitor_types != '') {
					this.pageNum = 1
					this.listShop()
				}
			},
			deep: true
		}
	},
	created() {},
	mounted() {
		// this.getMerchants() //商户列表
		// this.listArea() //商户列表
		//搜索栏目的店铺列表
		let fn = new FormData()
		fn.append('sign_status', 30) //已合作的店铺
		fn.append('status', 1) //启用的店铺
		// fn.append("search_list", 1); //不进行分页
		this.$http.post(this.url + '/shop/getListForSearch', fn).then(
			res => {
				// console.log(res.data.data);
				if (res.data.msg == '查询成功' || res.data.code == '200') {
					if (res.data.data != null) {
						res.data.data.list.forEach(item => {
							item.value = item.name
						})
						this.shopList2 = res.data.data.list
					} else {
						this.shopList2 = []
					}
				} else if (res.data.code == '8886') {
					//code   8886  登录过期
					sessionStorage.clear()
					this.$alert('登录已过期，请重新登录 !', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							window.location = 'login.html'
						}
					})
					return
				} else {
					this.$message.error(res.data.msg)
					return
				}
			},
			res => {
				this.$message.error('网络错误！')
				return
			}
		)
	},
	methods: {
		listShop() {
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数

			fn.append('monitor_type', this.monitor_type)
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			fn.append('shop_sn', this.shop_sn)

			fn.append('area_id', this.area_id)
			fn.append('date', this.work_date)

			// fn.append("job_areas", this.area_id);

			this.$http.post(this.url + '/abnormal/listDemandMonitor', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							var job_times_arr = res.data.data.list
							this.shopList = job_times_arr
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			if (this.monitor_types != '') {
				this.listShop()
			}
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			if (this.monitor_types != '') {
				this.listShop()
			}
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			// this.business_id = "";
			// this.business_name = "";
			this.shop_id = ''
			this.shop_name = ''
			this.shop_sn = ''
			// this.area_id = "";
			// this.area_name = "";
			// this.sign_status = "";
			this.monitor_type = ''
		},

		//进入单元行
		cellMouseEnterSD(row, column, cell, event) {
			console.log(row)
			publicData.isShowLoading = false
			// 请求人员资料信息
			let fn = new FormData()
			fn.append('shop_sn', row.shop_sn)
			fn.append('job_type', row.job_type)
			fn.append('date', this.work_date)
			fn.append('shop_id', row.shop_id)
			setTimeout(() => {
				this.$http.post(this.url + '/abnormal/listDemandMonitorInfo', fn).then(
					res => {
						if (res.data.msg == '操作成功！' || res.data.code == '200') {
							this.user_historySD = res.data.data
							this.preset[0].arr = res.data.data.preset.Monday //周一
							this.preset[1].arr = res.data.data.preset.Tuesday //周二
							this.preset[2].arr = res.data.data.preset.Wednesday //周三
							this.preset[3].arr = res.data.data.preset.Thursday //周四
							this.preset[4].arr = res.data.data.preset.Friday //周五
							this.preset[5].arr = res.data.data.preset.Saturday //周六
							this.preset[6].arr = res.data.data.preset.Sunday //周天
						}
					},
					res => {}
				)
			}, 300)
		},
		// 离开单元行
		cellMouseEnterSDLeave() {
			setTimeout(() => {
				publicData.isShowLoading = true
			}, 1000)
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},
		//商户的自动完成
		// querySearch3(queryString, cb) {
		//   var restaurants = this.merchantsList
		//   var results = queryString ? restaurants.filter(this.createFilter3(queryString)) : restaurants
		//   // 调用 callback 返回建议列表的数据
		//   cb(results)
		// },
		// createFilter3(queryString) {
		//   return (restaurant) => {
		//     return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
		//   }
		// },
		// handleSelect3(item) {
		//   this.business_name = item.name
		//   this.business_id = item.id
		// },
		//商圈的自动完成
		// querySearch4(queryString, cb) {
		//   var restaurants = this.areaList
		//   var results = queryString ? restaurants.filter(this.createFilter4(queryString)) : restaurants
		//   // 调用 callback 返回建议列表的数据
		//   cb(results)
		// },
		// createFilter4(queryString) {
		//   return (restaurant) => {
		//     return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
		//   }
		// },
		// handleSelect4(item) {
		//   console.log(item)
		//   this.area_id = item.id
		// },

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			if (this.work_date != '') {
				if (this.monitor_types != '') {
					this.listShop()
				}
			}
		},
		downloadOrder() {
			//导出订单
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				export: 1,
				date: this.work_date,
				monitor_type: this.monitor_type,
				shop_sn: this.shop_sn,
				// job_type: this.label_id,
				area_id: this.area_id
			}
			let param = $.param(obj)
			window.location.href = this.url + '/abnormal/listDemandMonitor?' + param
		},
		//跳转店铺详情
		goToTag(row) {
			// console.log(row);
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.shop_id } })
			window.open(href, '_blank')
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.click_state {
	cursor: pointer;
}

.JobCentent .wrap_top {
	display: flex;
	margin-right: 0px;
}
</style>



// WEBPACK FOOTER //
// src/components/abnormal/components/Two.vue